<template>
  <div id="cropimage" ref="cropimage">
    <div class="cropcropimage" :style="{ transform: `scale(${backSize})` }">
      <canvas id="canvas"></canvas>
    </div>
    <div class="cropimage_bottom">
      <div @click="cropimageclose" class="cropimage_bot">
        <img :src="img.guanbiwhite" alt="" />关闭
      </div>
      <div @click="cropimagecrop" class="cropimage_bot">
        <img :src="img.cutwhite" alt="" />确定
      </div>
    </div>
  </div>
</template>
  
  <script>
import mixin from "@/utils/mixin";
let canvas_2;
let canvas_layer_2;
let oldImageData;
let newImageData;
let elementResizeDetectorMaker = require("element-resize-detector");

export default {
  mixins: [mixin],
  props: {
    illuminate: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      sum: 40, //0-255
      backSize: null,
      maxW: null,
      maxH: null,
      width: 0,
      height: 0,
    };
  },
  watch: {},
  methods: {
    //获取图片宽高
    dealImage() {
      
      let that = this;
      let img = new Image();
      img.onload = function () {
        that.dom = true;
        let { width, height } = img;
        that.width = width;
        that.height = height;
        that.listeningDom();
      };
      img.crossOrigin = "Anonymous";
      img.src = that.illuminate;
    },
    rangerun() {
      let rangerun = document.getElementById("rangerun");
      rangerun.onmousedown = function (e) {
        e = e || window.event;
        //获取鼠标相对于物体位置
        let disY = e.clientY - rangerun.offsetTop;
        //鼠标移动事件
        document.onmousemove = function (e) {
          e = e || window.event; //事件对象
          let top = e.clientY - disY;
          if (top >= 0 && top <= 255)
            rangerun.style.top = e.clientY - disY + "px";
          this.sum = e.clientY - disY;
        };
        document.onmouseup = function () {
          document.onmousemove = null; //取消鼠标移动事件
        };
      };
    },
    cropimageclose() {
      this.$emit("illuminateimage");
    },
    cropimagecrop() {
      let canvas = document.getElementById("canvas");
      let baseStr = canvas.toDataURL("image/png");
      this.$emit("illuminateimage", baseStr);
    },
    createpicture() {
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let canvas_1 = document.createElement("canvas");
      let canvas_layer_1 = canvas_1.getContext("2d"); // 用来画原图的图层
      canvas_2 = document.createElement("canvas");
      canvas_layer_2 = canvas_2.getContext("2d"); // 用来画马赛克图的图层
      let canvas_3 = document.createElement("canvas");
      let canvas_layer_3 = canvas_3.getContext("2d"); // 用来画笔迹的图层
      let image = new Image();
      image.src = this.illuminate;
      image.onload = async () => {
        canvas_3.width =
          canvas_2.width =
          canvas_1.width =
          canvas.width =
            image.width;
        canvas_3.height =
          canvas_2.height =
          canvas_1.height =
          canvas.height =
            image.height;

        canvas_layer_1.drawImage(image, 0, 0); // 把图片绘制到画布上
        // 获取原来图片的像素数据
        oldImageData = canvas_layer_1.getImageData(
          0,
          0,
          image.width,
          image.height
        );
        // 创建一个新的像素数据
        newImageData = canvas_layer_2.createImageData(
          image.width,
          image.height
        );
        // 自己定义一个块的容量，把N个像素作为一个单位
        // 把图片分块 每一块的size设置为5（自己随便定义的）
        let size = 50;
        for (let i = 0; i < oldImageData.width / size; i++) {
          for (let j = 0; j < oldImageData.height / size; j++) {
            for (let m = 0; m < size; m++) {
              for (let n = 0; n < size; n++) {
                this.setPxColor(newImageData, i * size + m, j * size + n);
              }
            }
          }
        }
        canvas_layer_2.putImageData(newImageData, 0, 0);
        canvas_layer_3.lineCap = "round";
        canvas_layer_3.lineJoin = "round";
        canvas_layer_3.lineWidth = 20;
        canvas_layer_3.fillStyle = "blue";
        canvas_layer_3.fillStyle = "blue";
        canvas_layer_3.shadowColor = "blue";
        canvas_layer_3.shadowOffsetX = "blue";
        canvas_layer_3.shadowOffsetY = "blue";
        canvas_layer_3.shadowBlur=20;
        canvas.addEventListener("mousedown", mouseHandle);
        function mouseHandle(e) {
          if (e.type === "mousedown") {
            canvas_layer_3.moveTo(e.offsetX, e.offsetY);
            canvas.addEventListener("mousemove", mouseHandle);
            canvas.addEventListener("mouseup", mouseHandle);
          } else if (e.type === "mousemove") {
            canvas_layer_3.lineTo(e.offsetX, e.offsetY);
          } else if (e.type === "mouseup") {
            canvas.removeEventListener("mousemove", mouseHandle);
            canvas.removeEventListener("mouseup", mouseHandle);
          }
          canvas_layer_3.stroke();
        }
        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(canvas_3, 0, 0);
          ctx.globalCompositeOperation = "source-in";
          ctx.drawImage(canvas_2, 0, 0);
          ctx.globalCompositeOperation = "destination-over";
          ctx.drawImage(canvas_1, 0, 0);
          requestAnimationFrame(draw);
        }
        requestAnimationFrame(draw);
      };
      image.crossOrigin = "Annoymous";
    },
    // 设置指定坐标位置像素的值
    setPxColor(imageData, x, y) {
      const a = 300;
      imageData.data[(y * imageData.width + x) * 4 + 0] += a;
      imageData.data[(y * imageData.width + x) * 4 + 1] += a;
      imageData.data[(y * imageData.width + x) * 4 + 2] += a;
      imageData.data[(y * imageData.width + x) * 4 + 3] = this.sum;
    },
    listeningDom() {
      console.log(1234567890);
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.cropimage, (ele) => {
        let maxW = ele.offsetWidth - 40;
        let maxH = ele.offsetHeight - 140;
        this.Screensize(maxW, maxH);
      });
    },
    Screensize(maxW, maxH) {
      let { width, height } = this;
      let backSize;
      //都大于宽高
      if (maxW < width && maxW < height) {
        if (width > height) backSize = maxW / width;
        else backSize = maxH / height;
        //其中一个大于最大边
      } else if (maxW < width || maxH < height) {
        if (width > maxW) backSize = maxW / width;
        else if (height > maxH) backSize = maxH / height;
        //都不大于最大边
      } else backSize = 1;
      this.backSize = backSize;
      this.createpicture();
    },
  },
  mounted() {
    this.dealImage()
    this.rangerun();
    let rangerun = document.getElementById("rangerun");
    rangerun.style.top = "40px";
  },
};
</script>
  
  <style lang="less" scoped>
@import "../../assets/styles/frame.less";
#cropimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #191b1cc1;
  z-index: 101;
  .divDAJ();
  overflow: hidden;
  .cropcropimage {
    position: absolute;
    .cropimage_range {
      position: absolute;
      right: -60px;
      top: 30%;
      width: 2px;
      height: 280px;
      // border-top:20px solid transparent ;

      background: #fff;
      .range_run {
        position: absolute;
        top: 0;
        left: -14px;
        // border-radius: 50%;

        width: 30px;
        height: 30px;
        transform: rotate(45deg);
        .range_sun {
          -webkit-user-drag: none;
        }
      }
    }
  }
  .cropimage_bottom {
    position: absolute;
    bottom: 20px;
    width: 270px;
    height: 40px;
    color: white;
    font-size: 14px;
    .divAJS();
    .cropimage_bot {
      width: 110px;
      height: 100%;
      background: #9e9d9d;
      border-radius: 20px;
      padding: 0 28px;
      box-shadow: 0px 10px 4px #14141452;
      .divAJS();
    }
  }
}
</style>